<template>
  <f7-page class="page">
    <f7-user-navbar title="cs"></f7-user-navbar>
    <f7-block-title>按钮</f7-block-title>
    <f7-block>
      <f7-row class="row">
        <f7-col>
          <qm-button
            :fill="true"
            type="primary"
            title="主要操作 Normal"
          ></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button type="primary" title="主要操作线框 Normal"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button title="辅助操作 Normal"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button title="辅助操作"></qm-button>
        </f7-col>
        <f7-col>
          <qm-button type="primary" :fill="true" title="主要操作"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button
            style="margin: 0 auto"
            type="primary"
            size="small"
            title="短按钮 Normal"
          ></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button type="warn" title="警告类操作 Normal"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button
            type="warn"
            :fill="true"
            title="警告类操作 Normal"
          ></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button
            type="primary"
            :fill="true"
            title="线框按钮主标题 Normal"
            subTitle="短按钮副文本副文本 Normal"
          ></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button type="primary" size="mini" title="胶囊按钮"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button
            type="primary"
            title="线框按钮主标题 Normal"
            subTitle="短按钮副文本副文本 Normal"
          ></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100">
          <qm-button
            type="primary"
            size="mini"
            :fill="true"
            :disabled="disabled"
            title="胶囊按钮"
          ></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100">
          <input type="radio" :checked="!disabled" @click="agree" /><span>同意</span
          ><span class="agreement">《用户授权协议》</span>
        </f7-col>
        <f7-col width="100" style="margin-top: 10px">
          <qm-button
            type="primary"
            :fill="true"
            :disabled="disabled"
            title="提交"
          ></qm-button>
        </f7-col>
      </f7-row>
      <f7-row>
        <f7-col width="100">
          <qm-button
            type="primary"
            size="mini"
            :fill="true"
            title="胶囊按钮"
          ></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100">
          <input type="radio" /><span>同意</span
          ><span class="agreement">《用户授权协议》</span><br />
        </f7-col>
        <f7-col width="100" style="margin-top: 10px">
          <qm-button
            type="primary"
            :fill="true"
            title="同意协议并提交"
          ></qm-button>
          <br />
          <qm-button title="暂不开通，仅手动缴费"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100">
          <qm-button
            type="primary"
            :fill="true"
            title="同意协议并提交"
          ></qm-button>
        </f7-col>
        <f7-col style="margin-top: 10px">
          <div style="font-size: 10px; color: #9ea7b7">
            查看<span class="agreement">《ETC服务用户协议》</span
            >，授权ETC服务获取身份证、收货地址用于申请ETC，关注车主服务生活号获取审核；
          </div>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100">
          <input type="radio" /><span>同意</span
          ><span class="agreement">《用户授权协议》</span>
        </f7-col>
        <f7-col width="100" style="margin-top: 10px">
          <qm-button type="primary" :fill="true" title="提交"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100">
          <input type="radio" /><span>同意</span
          ><span class="agreement">《用户授权协议》</span>
        </f7-col>
        <f7-col width="100" style="margin-top: 10px">
          <qm-button
            type="primary"
            :fill="true"
            title="同意协议并提交"
          ></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100">
          <input type="radio" /><span>同意</span
          ><span class="agreement">《用户授权协议》</span>
        </f7-col>
        <f7-col width="100" style="margin-top: 10px">
          <qm-button type="primary" :fill="true" title="提交"></qm-button>
        </f7-col>
      </f7-row>
    </f7-block>
  </f7-page>
</template>

<script scoped>
export default {
  data() {
    return {
      disabled: true,
    };
  },
  methods: {
    click(e) {
      console.log("click", e);
    },
    agree(){
        this.disabled = !this.disabled;
    }
  },
};
</script>

<style lang="less" scoped>
.row {
  margin-top: calc(124px * var(--ratio));
  &:first-child {
    margin-top: 0;
  }
  .agreement {
    color: var(--color-text-primary);
  }
}
</style>